<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <title>${setting.siteName} - 编辑研发类型</title>
    <meta name="keywords" content="${setting.siteName}">
    <meta name="description" content="${setting.siteName}">
    <!-- BEGIN HEADER -->
    [#include "/admin/include/style.ftl"]
    <!-- END HEADER -->
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content  animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>编辑研发类型</h5>
                    <div class="ibox-tools">
                        <button type="button" class="btn btn-outline btn-white btn-xs" id="btn-return-loippi"
                                onclick="location.href='${base}/admin/rd_type/list.jhtml'"><i
                                    class="fa fa-reply-all"></i> 返回列表
                        </button>
                    </div>
                </div>
                <div class="ibox-content">
                    <form id="inputForm" class="form-horizontal" action="${base}/admin/rd_type/update.jhtml"
                          method="post">
                        <input type="hidden" value="${rdType.id}" name="id"/>
                        <h3>基本信息</h3>
                        <div class="form-group">
                            <div class="row">
                                <div class="col-sm-6">
                                    <label class="col-sm-3 control-label">名称</label>
                                    <div class="col-sm-9">
                                        <input type="text" name="name" class="form-control" maxlength="200" required
                                               value="${(rdType.name)!''}"/>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--/row-->

                        <div class="form-group">
                            <div class="row">
                                <div class="col-sm-6">
                                    <label class="col-sm-3 control-label">图标</label>
                                    <div class="col-sm-9">
                                        <input type="hidden" name="icon" required id="picture" value="${rdType.icon}"/>
                                        <div class="col-sm-9" id="primaryImg"></div>
                                        <div style="clear: both"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="row">
                                <div class="col-sm-6">
                                    <label class="col-sm-3 control-label">简介</label>
                                    <div class="col-sm-9">
                                        <textarea name="introduction" class="form-control" placeholder="请输入"
                                                  rows="6">${(rdType.introduction)!''}</textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--/row-->
                        <h3>研发类型信息</h3>
                        <div class="form-group">
                            <div class="row">
                                <div class="col-sm-6">
                                    <label class="col-sm-3 control-label">主标题</label>
                                    <div class="col-sm-9">
                                        <input type="text" name="mainTitle" class="form-control" maxlength="200"
                                               value="${(rdType.mainTitle)!''}"/>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="row">
                                <div class="col-sm-6">
                                    <label class="col-sm-3 control-label">副标题</label>
                                    <div class="col-sm-9">
                                        <input type="text" name="subtitle" class="form-control" maxlength="200"
                                               value="${(rdType.subtitle)!''}"/>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="row">
                                <div class="col-sm-6">
                                    <label class="col-sm-3 control-label">图片</label>
                                    <div class="col-sm-9">
                                        <input type="hidden" name="images" id="images">
                                        <div class="col-sm-9" id="previewImages"></div>
                                        <div style="clear: both"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <h3>展示信息</h3>
                        <div class="form-group">
                            <div id="showInfo">
                            </div>
                            <div class="col-sm-offset-3" style="margin-top: 20px;">
                                <a href="javascript:0;" id="add_showinfo_module"> + 添加模块</a>
                            </div>
                        </div>
                        <h3>适用范围</h3>
                        <div class="form-group">
                            <div class="row">
                                <div class="col-sm-6 col-sm-offset-3">
                                    <input type="hidden" name="trialScope" id="trialScope" value="${rdType.trialScope}">
                                    <div class="col-sm-9" id="previewTrialScope"></div>
                                    <div style="clear: both"></div>
                                </div>
                            </div>
                        </div>
                        <h3>客户的声音</h3>
                        <div class="form-group">
                            <div id="voiceInfo">
                            </div>
                            <div class="col-sm-offset-3" style="margin-top: 20px;">
                                <a href="javascript:0;" id="add_voice_module"> + 添加模块</a>
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <div class="col-sm-12 col-sm-offset-10">
                                <button class="btn btn-success" type="submit">保存内容</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- BEGIN Script -->
[#include "/admin/include/script.ftl"]
<!-- END Script -->
<script>
    //展示信息模块
    var moduleIndex = 0;
    var showInfoIndex = 1;
    var voiceIndex = 1;

    /**
     * 添加展示信息模块
     */
    function addShowInfo(id = '', name = '', image = '', introduction = '') {
        let html = ' <div class="row" style="margin-top: 20px;">' +
            '                                    <div class="col-sm-10">' +
            '                                        <label class="col-sm-3 control-label">模块' + showInfoIndex + '：</label>' +
            '                                        <div class="col-sm-8" style="border: lightgray 1px solid;border-radius: 12px;padding: 10px;">' +
            '                                            <input type="hidden" name="types[' + moduleIndex + '].id" value="' + id + '">' +
            '                                            <input type="hidden" name="types[' + moduleIndex + '].type" value="1">' +
            '                                            <div class="form-group">' +
            '                                                <label class="col-sm-1 control-label">名称</label>' +
            '                                                <div class="col-sm-11">' +
            '                                                    <input type="text" class="form-control" name="types[' + moduleIndex + '].name" placeholder="请输入" value="' + name + '" required>' +
            '                                                </div>' +
            '                                            </div>' +
            '                                            <div class="form-group">' +
            '                                                <label class="col-sm-1 control-label">图片</label>' +
            '                                                <div class="col-sm-11">' +
            '                                                       <input type="hidden" name="types[' + moduleIndex + '].image" id="picture_' + moduleIndex + '" value="' + image + '">' +
            '                                                       <div class="col-sm-9" id="preview_' + moduleIndex + '"></div> ' +
            '                                                       <div style="clear: both"></div>' +
            '                                                </div>' +
            '                                            </div>' +
            '                                            <div class="form-group">' +
            '                                                <label class="col-sm-1 control-label">简介</label>' +
            '                                                <div class="col-sm-11">' +
            '                                                    <textarea id="container_' + moduleIndex + '" name="types[' + moduleIndex + '].introduction">' + introduction + '</textarea>' +
            '                                                </div>' +
            '                                            </div>' +
            '                                        </div>' +
            '                                        <div class="col-sm-1">' +
            '                                               <a href="javascript:0;" class="btn-del-showinfo"> - 删除</a> ' +
            '                                        </div>' +
            '                                    </div>' +
            '                                </div>';
        $('#showInfo').append(html);
        //图片
        $('#preview_' + moduleIndex).zupImg({
            "targetId": "picture_" + moduleIndex,
            "maxFileSize": 10,
            "init": image
        });
        //简介
        var ue = UE.getEditor("container_" + moduleIndex, {
            initialFrameHeight: 400,
            scaleEnabled: true
        });
        moduleIndex++;
        showInfoIndex++;
    }

    //客户的声音 模块

    /**
     * 添加客户的声音模块
     */
    function addCustomerVoiceInfo(id = '', name = '', image = '', introduction = '') {
        let html = ' <div class="row" style="margin-top: 20px;">' +
            '                                    <div class="col-sm-10">' +
            '                                        <label class="col-sm-3 control-label">模块' + voiceIndex + '：</label>' +
            '                                        <div class="col-sm-8" style="border: lightgray 1px solid;border-radius: 12px;padding: 10px;">' +
            '                                            <input type="hidden" name="types[' + moduleIndex + '].id" value="' + id + '">' +
            '                                            <input type="hidden" name="types[' + moduleIndex + '].type" value="2">' +
            '                                            <div class="form-group">' +
            '                                                <label class="col-sm-1 control-label">项目名称</label>' +
            '                                                <div class="col-sm-11">' +
            '                                                    <input type="text" class="form-control" name="types[' + moduleIndex + '].name" placeholder="请输入" value="' + name + '" required>' +
            '                                                </div>' +
            '                                            </div>' +
            '                                            <div class="form-group">' +
            '                                                <label class="col-sm-1 control-label">客户logo</label>' +
            '                                                <div class="col-sm-11">' +
            '                                                       <input type="hidden" name="types[' + moduleIndex + '].image" id="picture_' + moduleIndex + '" value="' + image + '">' +
            '                                                       <div class="col-sm-9" id="preview_' + moduleIndex + '"></div> ' +
            '                                                       <div style="clear: both"></div>' +
            '                                                </div>' +
            '                                            </div>' +
            '                                            <div class="form-group">' +
            '                                                <label class="col-sm-1 control-label">文字</label>' +
            '                                                <div class="col-sm-11">' +
            '                                                    <textarea class="form-control" name="types[' + moduleIndex + '].introduction" rows="6">' + introduction + '</textarea>' +
            '                                                </div>' +
            '                                            </div>' +
            '                                        </div>' +
            '                                        <div class="col-sm-1">' +
            '                                               <a href="javascript:0;" class="btn-del-voice"> - 删除</a> ' +
            '                                        </div>' +
            '                                    </div>' +
            '                                </div>';
        $('#voiceInfo').append(html);
        //客户logo
        $('#preview_' + moduleIndex).zupImg({
            "targetId": "picture_" + moduleIndex,
            "maxFileSize": 10,
            "init": image
        });
        moduleIndex++;
        voiceIndex++;
    }

    $(document).ready(function () {
        [@flash_message /]
        $(".chosen-select").chosen({width: "100%"});
        $(".input-daterange").datepicker({keyboardNavigation: false, forceParse: false, autoclose: true});

        $(".browserButton").browser({
            callback: function (url) {
                $("#" + $(this).attr('for')).val(url);
            }
        });

        $(".input-group.date").datepicker({
            todayBtn: "linked",
            keyboardNavigation: false,
            forceParse: false,
            calendarWeeks: true,
            autoclose: true
        });

        $("#inputForm").validate({
            submitHandler: function (form) {
                $('#images').val(imgList.getImgs().join(','));
                form.submit();
            },
            rules: {},
            messages: {}
        });
        loadImgs();

        [#list modules as m]
        [#if m.type==1]
        addShowInfo('${m.id}', '${m.name}', '${m.image}', '${m.introduction}');
        [/#if]
        [#if m.type==2]
        addCustomerVoiceInfo('${m.id}', '${m.name}', '${m.image}', '${m.introduction}');
        [/#if]
        [/#list]
    });
    //图标
    $("#primaryImg").zupImg({
        "targetId": "picture",
        "maxFileSize": 10,
        "init": "${rdType.icon}"
    });
    //适用范围
    $("#previewTrialScope").zupImg({
        "targetId": "trialScope",
        "maxFileSize": 10,
        "init": "${rdType.trialScope}"
    });

    //图片 多图上传
    var imgList = $("#previewImages").zupImg({
        "targetId": "images",
        "maxFileSize": 10,
        "preview": false,
        "mul": true
    });
    //添加模块
    $('#add_showinfo_module').click(function () {
        addShowInfo();
    });
    //添加客户的声音模块
    $('#add_voice_module').click(function () {
        addCustomerVoiceInfo();
    });

    //加载多图片
    function loadImgs() {
        let imgStrs = "${rdType.images}";
        if (imgStrs != '') {
            let arr = imgStrs.split(',');
            for (let i in arr) {
                imgList.addImg(arr[i]);
            }
        }
    }

    //删除模块
    $('body').on('click', '.btn-del-showinfo', function () {
        console.log($(this));
        let $thisModule = $(this).parent().parent();
        $thisModule.remove();
        showInfoIndex--;
    });
    //删除模块
    $('body').on('click', '.btn-del-voice', function () {
        let $thisModule = $(this).parent().parent().parent();
        $thisModule.remove();
        voiceIndex--;
    });
</script>
</body>
</html>
